<template>
  <div class="app-container no-padding">
    <info-page-container :show-go-back="showGoBack">
      <template slot="body">
        <div class="info-page-txt-root">
          <div class="info-header-container">
            <txt-header
                :title="`${infoData.belongOrgName}-${infoData.questionParentTypeName}-${infoData.questionTypeName}`">
              <template slot="title">
                <div class="lab-txt-row">
                  <div class="lab-item">
                    {{ (infoData || {}).questionYear }}
                  </div>
                  <div class="lab-item">
                    {{ (infoData || {}).situation }}
                  </div>
                </div>
              </template>
              <template slot="handel">

                <el-button
                    v-for="(item,index) in getBtList('HANDEL_BT')"
                    :type="item.type"
                    v-show="item.filterFun({inspectInfo,handelCode,infoData})"
                    plain
                    class="no-back"
                    :size="item.size"
                    @click="clickHandel(item,item.baseParam)"
                >{{ item.label }}
                </el-button>


              </template>
            </txt-header>
          </div>
          <div class="info-body-container">
            <div class="table-con">
              <info-table :table-config="infoConfig" :data="infoData"></info-table>
            </div>
            <div class="flow-con">
              <div class="header tabs-container">
                <el-tabs v-model="currentTabValue">
                  <el-tab-pane v-for="item in [{label:'上报流程',value:'1'}]" :key="item.value" :label="item.label"
                               :name="item.value"></el-tab-pane>
                </el-tabs>
              </div>
              <div class="body">
                <el-scrollbar v-if="isArr(infoData.questionRecords)">
                  <flow-container :data-list="infoData.questionRecords"
                                  :txt-config="txtConfig"></flow-container>
                </el-scrollbar>
                <el-empty v-else description="暂无数据"></el-empty>
              </div>

            </div>
          </div>
        </div>

      </template>
    </info-page-container>
  </div>
</template>

<script>
import {subShowPageMixins} from './subShowPageMixins'
import TxtHeader from "@/views/components/TxtHeader/index.vue";
import infoTable from "@/views/components/InfoTable/index.vue";
import FlowContainer from "@/views/components/FlowContainer/index.vue";
import {
  checkDefectQuestion,
  getDefectQuestionInfoById,
  revokeSubmit,
  updateAndSubmitDefectQuestion
} from "@/api/securityCheck/defect/defectQuestion";
import {QUESTION_STATE} from "@/constantData";
import {isArr} from "@/utils/arrayUtil";

export default {
  mixins: [subShowPageMixins],
  components: {
    TxtHeader,
    infoTable,
    FlowContainer
  },
  data() {
    return {
      currentTabValue: '1',
      infoData: {},
      QUESTION_STATE,
      infoConfig: [
        {
          label: '所属检查',
          value: 'inspectName'
        },
        {
          label: '所属企业名称',
          value: 'belongOrgName'
        },
        {
          label: '所属企业代码',
          value: 'belongOrg'
        },
        {
          label: '安全员名称',
          value: 'undertakerName'
        },
        {
          label: '安全员代码',
          value: 'undertaker'
        },
        {
          label: '隐患大类名称',
          value: 'questionParentTypeName'
        },
        {
          label: '隐患大类代码',
          value: 'questionParentTypeCode'
        },
        {
          label: '隐患子类名称',
          value: 'questionTypeName'
        },
        {
          label: '隐患子类代码',
          value: 'questionTypeCode'
        },
        {
          label: '隐患年份',
          value: 'questionYear'
        },
        {
          label: '隐患描述',
          value: 'questionDesc'
        },
        {
          label: '整改进度',
          value: 'scheduleName'
        },
        {
          label: '整改完成情况',
          value: 'situation'
        },
        {
          label: '整改建议',
          value: 'suggestion'
        },
        {
          label: '附件',
          value: 'fileVoList',
          type: 'file'
        },
      ],
      txtConfig: [
        {
          label: '操作人',
          value: 'operationUserName'
        },
        {
          label: '操作类型',
          value: 'operationTypeName'
        },
        {
          label: '目标',
          value: 'operationTargetName'
        },
        {
          label: '时间',
          value: 'operationTime'
        },
        {
          label: '备注',
          value: 'operationRemark'
        },
      ]
    }
  },
  methods: {
    audit({result}) {
      let {infoData: {id}} = this
      this.$prompt('请输入审批说明', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
      }).then(({value: remark}) => {
        checkDefectQuestion({result, questionIds: [id], remark}).then(res => {
          this.$modal.msgSuccess("审核成功");
          this.getList()
        })
      }).catch(() => {
      });
    },
    isArr,
    handleAdd() {
      let {inspectInfo: {id: inspectId}, infoData: {id}} = this;
      let listPageName = 'HiddenDangerListPage'
      const query = id != null && id !== '' ? {id, inspectId, listPageName} : {inspectId, listPageName}
      this.$router.push({path: '/securityCheck/defectQuestionEdit', query})
    },
    submit() {
      let owner = this
      updateAndSubmitDefectQuestion(this.infoData).then(response => {
        owner.$modal.msgSuccess('新增成功')
        owner.saveFinish()
      });
    },
    saveFinish() {
      this.$router.back(-1)
    },
    handleRevoke() {
      let {infoData: {id}} = this;
      let owner = this
      this.$modal.confirm('是否确认撤回当前数据项？').then(function () {
        return revokeSubmit({id});
      }).then(() => {
        owner.$modal.msgSuccess("撤回成功");
        owner.saveFinish()
      }).catch(() => {
      });
    },
    getInfoData() {
      let {currentId} = this;
      if (currentId == null || currentId == '') return;
      this.startLoading('正在加载....')
      let owner = this
      let {inspectInfo: {inspectName}} = this
      //调用获取隐患详情接口
      getDefectQuestionInfoById(currentId).then(res => {
        let {data} = res;  //解构
        owner.infoData = data
        owner.infoData.inspectName = inspectName
      }).finally(() => {
        owner.endLoading()  //结束加载动画
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.lab-txt-row {
  display: flex;
  margin-left: 10px;

  .lab-item {
    box-sizing: border-box;
    width: max-content;
    border-radius: 3px;
    border: 1px solid rgba(32, 125, 255, 1);
    padding: 5px 8px;
    margin-right: 12px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 12px;
    display: flex;
    justify-content: center;
    color: rgba(32, 125, 255, 1);

    &:last-child {
      margin: 0;
    }
  }
}

.info-body-container {
  display: flex;
  justify-content: space-between;

  .table-con {
    height: 100%;
    width: 70%;
  }

  .flow-con {
    height: 100%;
    width: 28%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(220, 223, 230, 1);
    box-sizing: border-box;
    padding: 10px;

    .header {
      height: 55px;
      width: 100%;
    }

    .body {
      width: 100%;
      height: calc(100% - 55px);

      ::v-deep .el-empty {
        height: 100%;
        width: 100%;
      }
    }
  }
}
</style>
